<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="/plugins/layui/css/layui.css">
    <link rel="stylesheet" href="/plugins/font-awesome/css/font-awesome.min.css" type="text/css"/>
    <link rel="stylesheet" href="/plugins/adminLte/css/AdminLTE.min.css">
    <link rel="stylesheet" href="/css/global.css">
</head>
<body>

<div class="box box-primary">
    <div class="box-frame">
        <form class="layui-form layui-form-pane">
            <div class="layui-form-item">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-inline">
                    <input type="text" name="ownerName" class="ownerName layui-input"/>
                </div>
                <div class="layui-input-inline">
                    <select name="state">
                        <option value="">卡状态</option>
                        <option value='01' <c:if test="${'01'==state }"> selected="selected"</c:if>>在用</option>
                        <option value='02' <c:if test="${'02'==state }"> selected="selected"</c:if>>停用</option>
                        <option value='E' <c:if test="${'E'==state }"> selected="selected"</c:if>>过期</option>
                    </select>
                </div>

                <div class="layui-input-inline">
                    <select name="cardType">
                        <option value="">卡类别</option>
                        <option value='n' <c:if test="${'n'==cardType }"> selected="selected"</c:if>>普通卡</option>
                        <option value='s' <c:if test="${'s'==cardType }"> selected="selected"</c:if>>超级卡</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">小区信息</label>
                <div class="layui-input-inline">
                    <select name="selectComm" id="selectComm" lay-filter="selectComm">
                        <option value="">请请选小区</option>
                    </select>
                </div>
                <div class="layui-input-inline">
                    <select name="selectBuilding" id="selectBuilding" lay-filter="selectBuilding">
                        <option value="">请选择楼栋</option>
                    </select>
                </div>
                <div class="layui-input-inline">
                    <select name="selectUnit" id="selectUnit" lay-filter="selectUnit">
                        <option value="">请选择单元</option>
                    </select>
                </div>
                <div class="layui-input-inline">
                    <select name="selectFloor" id="selectFloor" lay-filter="selectFloor">
                        <option value="">请选择楼栋</option>
                    </select>
                </div>
                <div class="layui-input-inline">
                    <select name="selectRoom" id="selectRoom" lay-filter="selectRoom">
                        <option value="">请选择房号</option>
                    </select>
                </div>
                <button type="button" class="layui-btn" onclick="queryOnclick()">查询</button>
            </div>


            <table class="layui-table">
                <thead>
                <tr>
                    <th>门禁卡编号</th>
                    <th>业主名称</th>
                    <th>住宅信息</th>
                    <th>发卡时间</th>
                    <th>有效期至</th>
                    <th>卡类型</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="tbody">
                </tbody>
            </table>

            <div id="page"></div>
            <div style="clear: both"></div>
        </form>
    </div>
</div>
</body>

<script type="text/javascript" src="/plugins/jquery.min.js"></script>
<script src="/plugins/layui/layui.js"></script>
<script type="text/javascript" src="/js/core/helper.js"></script>
<script type="text/javascript" src="/js/core/building_utils.min.js"></script>
<SCRIPT language="javascript">
    var layer;

    function queryOnclick() {
        queryCardList();
    }

    var modelParam = {};
    modelParam.pageSize = 10;

    function queryCardList() {
        var roomInfo = "";
        var param = {};
        param.ownerName = $('.ownerName').val();
        param.pageSize = modelParam.pageSize;
        param.page = 1;

        roomInfo += $("select[name='selectComm']").val();
        roomInfo += $("select[name='selectBuilding']").val();
        roomInfo += $("select[name='selectUnit']").val();
        roomInfo += $("select[name='selectFloor']").val();
        roomInfo += $("select[name='selectRoom']").val();
        console.log(roomInfo);
        param.roomInfo = roomInfo;
        param.state = $("select[name='state']").val();
        param.cardType = $("select[name='cardType']").val();

        postJson("/card/query.x", $.param(param), function (data) {
            $('#tbody').empty();
            render(data.list);
            layui.laypage({
                cont: 'page'
                , pages: Math.ceil(data.size / modelParam.pageSize)
                , jump: function (row, first) {
                    if (!first) {
                        param.page = row.curr;
                        queryPage(param);
                    }
                }
            });
        });
    }

    /* 卡挂失操作 */
    function lost(obj, state) {
        var param = {};
        param.cardNo = $(obj).parent().parent().children(".t1").text();
        param.LostOrResume = state;
        var confirmStr = state == 'resume' ? "确定要恢复该卡么" : "确定要挂失该卡么?挂失后改卡将无法使用！";
        var successStr = state == 'resume' ? "恢复成功！" : "挂失成功！";
        layer.confirm(confirmStr, {
            btn: ['确认', '取消'], btn1: function () {
                postJson("/card/lost.x", $.param(param), function (data) {
                    layer.alert(successStr);
                    queryCardList();
                });
            }
        });

    }

    function view(obj) {
        var param = {};
        param.cardNo = obj;
        postJson("/card/findCard.x", $.param(param), function (data) {
                data = data.data;
                var output = "<hr/>";
                if (data.cardInfo.cardType == 'n') {
                    for (var i = 0; i < data.cardPerms.length; i++) {
                        output += '&nbsp&nbsp&nbsp&nbsp' + data.cardPerms[i].devStr + '&nbsp&nbsp&nbsp&nbsp<br><hr/>';
                    }
                } else if (data.cardInfo.cardType == 's') {
                    output += '&nbsp&nbsp&nbsp&nbsp[' + data.commName + '] 小区所有权限&nbsp&nbsp&nbsp&nbsp<hr/>';
                }
                console.log(output);
                layer.open({
                    title: '该卡权限',
                    type: 1,
                    shadeClose: true,
                    content: output
                });
            }
        );

    }

    function render(list) {
        $('#tbody').append();
        for (var i in list) {
            $('#tbody').append(
                '<tr>' +
                '<td class="t1">' + list[i].cardNo + '</td>' +
                '<td>' + list[i].ownerName + '</td>' +
                '<td>' + (list[i].roomInfo == undefined ? "业主不存在" : list[i].roomInfo) + '</td>' +
                '<td>' + list[i].lastModifyTime + '</td>' +
                '<td>' + (list[i].endDate?list[i].endDate:'永久') + '</td>' +
                '<td>' + (list[i].cardType == 'n' ? '普通卡' : '超级卡') + '</td>' +
                '<td>' +
                '<button type="button" class="layui-btn layui-btn-mini layui-btn-normal" onclick="view(\'' + list[i].cardNo + '\')">查看</button>' +
                ((list[i].state == "01" || list[i].state == "03") ?
                    '<button type="button" class="layui-btn layui-btn-mini layui-btn-danger" onclick="lost(this,\'lost\')">挂失</button>' :
                    '<button type="button" class="layui-btn layui-btn-mini layui-btn-disabled" >'+(list[i].state == '02'?'挂失':'过期')+'</button>') +
                (list[i].state == "02" || list[i].state == "E"? '<button type="button" class="layui-btn layui-btn-mini" onclick="lost(this,\'resume\')">恢复</button>' : '') +
                '</td>' +
                '</tr>'
            );
        }
        $('#tbody').append("<tr></tr>");
    }

    function queryPage(param) {
        postJson("/card/query.x", $.param(param), function (data) {
            $('#tbody').empty();
            render(data.list);
        });
    }

    layui.use(['jquery', 'form', 'element', 'laypage', 'layer'], function () {
        layer = layui.layer;
        var form = layui.form();

        setSelectComm(true,function () {
            queryCardList();
        });


        form.render();
    });
</SCRIPT>